<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>xPanel 安装</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css" media="all">
	<style>
		/* 页面整体居中布局 */
		html, body {
			height: 100%;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #f2f2f2;
		}
		
		/* 安装窗口样式 */
		.install-container {
			width: 500px;
			padding: 30px;
			background-color: #fff;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		
		.install-title {
			font-size: 24px;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20px;
			color: #333;
		}
	</style>
</head>
<body>
	
	<!-- 安装主容器 -->
	<div class="install-container">
		<div class="install-title">xPanel 安装程序</div>
		
		<!-- 表单区域 -->
		<form class="layui-form" action="#" lay-filter="install-form">
			
			<!-- 管理账号 -->
			<div class="layui-form-item">
				<label class="layui-form-label">管理账号</label>
				<div class="layui-input-block">
					<input type="text" name="username" required lay-verify="required" placeholder="请输入管理员邮箱" class="layui-input">
				</div>
			</div>
			
			<!-- 管理密码 -->
			<div class="layui-form-item">
				<label class="layui-form-label">管理密码</label>
				<div class="layui-input-block">
					<input type="password" name="password" required lay-verify="required" placeholder="请输入管理员密码" class="layui-input">
				</div>
			</div>
			
			<!-- 安装按钮 -->
			<div class="layui-form-item">
				<div class="layui-input-block" style="text-align: right;">
					<button id="install" class="layui-btn layui-btn-normal" lay-submit lay-filter="install">开始安装</button>
				</div>
			</div>
			
		</form>
	</div>
	
	<!-- 引入 Layui 2.13 JS -->
	<script src="/layui/layui.js"></script>
	
	<!-- 页面逻辑 -->
	<script>
		// 加载模块
		layui.use(['form', 'layer'], function () {
			const form = layui.form;
			const layer = layui.layer;
			
			// 开始安装
			form.on('submit(install)', function (data) {
				const formData = data.field;
				
				// 禁用按钮
				var btn = document.getElementById('install');
				btn.classList.add('layui-btn-disabled');
				btn.disabled = true;
				
				// 显示加载动画
				layer.load(2);
				
				// 发送请求
				fetch("/", {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json'
					},
					body: JSON.stringify(formData)
				})
				.then(response => response.json())
				.then(data => {
					if ( data.result ) {
						layer.msg(data.msg, {icon: 1});
						// 2秒后跳转到登陆页面
						setTimeout(() => {
							window.location.href = '/';
						}, 2000);
					} else {
						layer.msg('请求服务报错：' + data.msg, {icon: 2});
						btn.classList.remove('layui-btn-disabled');
						btn.disabled = false;
					}
				})
				.catch(error => {
					layer.msg('请求出错，请查看开发者工具检查原因', {icon: 2});
					console.error('Error:', error)
					btn.classList.remove('layui-btn-disabled');
					btn.disabled = false;
				});
				
				// 关闭加载动画
				layer.closeAll('loading');
				
				// 阻止默认提交（由JS控制）
				return false;
			});
		});
	</script>
</body>
</html>